import React, { useState } from 'react';
import './LowCode.css';
const ImageLayoutClone = () => {
  const [opacity, setOpacity] = useState(100);
  
  return (
    <div className="container">
      {/* 顶部文件区域 */}
      <div className="file-section">
        <div className="file-header">
          <h2 className="section-title">文件</h2>
          <div className="file-path">
            <span>保存至... /</span>
            <span className="untitled">未命名</span>
          </div>
        </div>
      </div>
      
      {/* 搜索模板区域 */}
      <div className="template-section">
        <div className="template-header">
          <h3 className="subtitle">搜索模板</h3>
          <button className="reset-btn">重置模板</button>
        </div>
        
      
        <div className="categories">
          <h4 className="category-title">分类</h4>
          <ul className="category-list">
            <li className="category-item active">面层获取指导直播</li>
            <li className="category-item">芝麻培训</li>
            <li className="category-item">编辑种子互动课堂</li>
          </ul>
        </div>
      </div>
      
      <div className="divider"></div>
      
      //ghjk

      
      {/* 编程赋能未来区域 */}
      <div className="programming-section">
        <h2 className="programming-title">编程赋能未来</h2>
        <p className="programming-subtitle">仲夏集市，畅玩一下</p>
      </div>
      
      <div className="divider"></div>
      
      {/* 分享区域 */}
      <div className="share-section">
        <h3 className="subtitle">分享</h3>
        <div className="share-options">
          <button className="share-btn">下载</button>
          <button className="share-btn">画板</button>
          
          <div className="size-option">
            <span className="size-label">尺寸</span>
            <div className="size-details">
              <p className="dimensions">1242 × 2208 px</p>
              <div className="size-controls">
                <button className="size-btn">调整尺寸</button>
                <button className="size-btn">尺寸延展</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* 背景图区域 */}
      <div className="background-section">
        <h3 className="subtitle">背景图</h3>
        <div className="bg-controls">
          <button className="bg-btn">上传图片</button>
          <button className="bg-btn">背景库</button>
        </div>
      </div>
      
      {/* 背景色区域 */}
      <div className="bg-color-section">
        <h3 className="subtitle">背景色</h3>
        <div className="opacity-control">
          <span className="opacity-label">不透明度</span>
          <div className="slider-container">
            <input 
              type="range" 
              min="0" 
              max="100" 
              value={opacity}
              onChange={(e) => setOpacity(parseInt(e.target.value))}
              className="opacity-slider"
            />
            <span className="opacity-value">{opacity}%</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ImageLayoutClone;